<template>
  <div class="node-wrap">
    <div class="node-wrap-root">
      <div class="node-wrap-root-title">{{ nodeData.title }}</div>
      <node-wrap
        v-if="nodeData.children && nodeData.children.length"
        :nodeData="nodeData.children"
      ></node-wrap>
    </div>
  </div>
</template>

<script>
import nodeWrap from "./components/nodeWrap.vue";
export default {
  components: {
    nodeWrap,
  },
  data() {
    return {
      nodeData: {
        key: "1",
        title: "雷军简介",
        children: [
          {
            key: "1-1",
            title: "个人背景",
            children: [
              { key: "1-1-1", title: "个人背景1" },
              { key: "1-1-2", title: "个人背景2" },
              { key: "1-1-3", title: "个人背景3" },
            ],
          },
          {
            key: "1-2",
            title: "职业生涯",
          },
          {
            key: "1-3",
            title: "成就与荣誉",
          },
          {
            key: "1-4",
            title: "社会影响力",
          },
        ],
      },
    };
  },
};
</script>
<style scoped lang="less">
.node-wrap {
  width: 100%;
  display: flex;
  overflow: auto;
}
.node-wrap-root{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.node-wrap-root-title{
  width: 100px;
  border: 1px solid red;
  box-sizing: border-box;
  margin-bottom: 20px;
}
</style>
